<template>
  <div id="app">
    <div class="search">
      <router-link class="city" to="/home/city">{{ city }}</router-link>
      <van-search @touchstart="touchsearch" placeholder="请输入搜索关键词" />
    </div>

    <div class="search2"></div>

    <div id="allmap"></div>
  </div>
</template>

<script type="text/javascript">

export default {
  data() {
    return {
      city: "",
    };
  },
  methods: {
    touchsearch(){
      this.$router.push({path: '/home/touchsearch'});
    }
  },
  computed: {},
  created() {},
  mounted() {
    // 百度地图API功能
    var that = this;
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 12);

    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(
      function (r) {
        console.log(r);
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          that.city = r.address.city;
          console.log(that.city);
          var mk = new BMap.Marker(r.point);
          map.addOverlay(mk);
          map.panTo(r.point);
          // alert('您的位置：'+r.point.lng+','+r.point.lat);
        } else {
          alert("failed" + this.getStatus());
        }
      },
      { enableHighAccuracy: true }
    );
  },
};
</script>

<style scoped  lang="scss">
.search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  background-color: #fff;
  z-index: 98;
  .city {
    font-size: 14px;
    line-height: 54px;
    margin-left: 10px;
  }
  .van-search {
    width: 300px;
  }
}

.search2 {
  height: 56px;
}
</style>
